<template>
  <div class="shopManager">
    <p style="padding: 10px; border-bottom: 1px solid #f2f2f2; font-size: 18px;display:flex;justify-content:space-between">
      <span>店铺管理</span>
      <el-button type="success" @click="holdBtn">保存</el-button>
    </p>

    <el-form ref="form"  label-width="80px" style=" margin-top:30px">

      <el-form-item label="店铺名称">
        <el-input style="width:450px;" v-model="shopData.name"></el-input>
      </el-form-item>

      <el-form-item label="店铺公告">
           <el-input style="width:450px" type="textarea"  :autosize="{ minRows: 6, maxRows: 10}" placeholder="请输入内容"  v-model="shopData.bulletin"> </el-input>
     </el-form-item>

      <el-form-item label="店铺头像">
        <el-upload  class="avatar-uploader"  action="http://127.0.0.1:5000/shop/upload" :show-file-list="false" :on-success="handleAvatarSuccess"   >
        <img   v-if="shopData.avatar" :src="shopData.avatar" class="avatar">
        <i style="border:1px dashed #d9d9d9" v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
     </el-form-item>

      <el-form-item label="店铺图片">
        <el-upload :file-list="pics"  action="http://127.0.0.1:5000/shop/upload" list-type="picture-card" :on-remove="picsRemove" :on-success="picsSuccess">
             <i class="el-icon-plus"></i>
        </el-upload>    
     </el-form-item>

     <el-form-item label="配送费">
        <el-input style="width:450px;" v-model="shopData.deliveryPrice"></el-input>
     </el-form-item>

     <el-form-item label="配送时间">
        <el-input style="width:450px;" v-model="shopData.deliveryTime"></el-input>
     </el-form-item>

     <el-form-item label="配送描述">
        <el-input style="width:450px;" v-model="shopData.description"></el-input>
     </el-form-item>

     <el-form-item label="店铺评分">
        <el-input style="width:450px;" v-model="shopData.score"></el-input>
     </el-form-item>

     <el-form-item label="销量">
        <el-input style="width:450px;" v-model="shopData.sellCount"></el-input>
     </el-form-item>

     <el-form-item label="活动" style="width:450px;">
       <el-checkbox-group  v-model="shopData.supports">
        <el-checkbox v-for="item in newsupports" :key="item" :label="item"  name='type'></el-checkbox>
        </el-checkbox-group>
     </el-form-item>

     <el-form-item label="添加活动" >
       <el-input v-model="action" style="width:450px; margin-right:20px"></el-input>
       <el-button type="success" @click="addAction">添加活动</el-button>
     </el-form-item>

     <el-form-item label="营销时间">
        <el-time-picker value-format="yyyy-MM-dd HH:mm:ss" is-range  v-model="shopData.date"  range-separator="至"  start-placeholder="开始时间"  end-placeholder="结束时间"  placeholder="选择时间范围">   </el-time-picker>
     </el-form-item>

      
    </el-form>

  </div>
</template>

<script>

import {shopinfo,shopedit} from '@/apis/shop'

export default {
     data() {
      return {
        shopData:{}, //店铺数据
        imageUrl: '',//店铺头像
        newsupports:[],//活动渲染
        action:'',//添加活动

        pics:[],//回填店铺图片
        picsUpdate:[],//店铺上传的图片
      }
    },
     
    methods: {
      //渲染数据
      shopMabager(){
        
        
         shopinfo({}).then(res=>{
        // console.log(res.data.data);
        //数据
        this.shopData = res.data.data
        this.newsupports = JSON.parse(JSON.stringify(this.shopData.supports))
        //照片墙
        this.pics = this.shopData.pics.map(url=>{
          let imgurl = url.substr(url.lastIndexOf('/')+1)
          this.picsUpdate.push(imgurl)
         return {
            name:imgurl,
            url
         }
        })

      })
      },
        //店铺图片
        //移除图片
      picsRemove(file) {
        // console.log(file);
        let imgUrl = file.response? file.response.imgUrl :file.name
        for (let i = 0; i < this.picsUpdate.length; i++) {
          if(imgUrl==this.picsUpdate[i]){
            this.picsUpdate.splice(i,1)
            break
          }
        }

      },
      //上传图片
      picsSuccess(res){
        // console.log(res);
        this.picsUpdate.push(res.imgUrl)
        // console.log(this.picsUpdate);
      },
         //店铺头像
        handleAvatarSuccess(res) {
          //回填头像
        let oldimg = this.shopData.avatar
        this.shopData.avatar=oldimg.substring(0,oldimg.lastIndexOf('/')+1)+res.imgUrl
        // console.log(this.imageUrl);
      },
      //点击添加活动
      addAction(){
        this.newsupports.push(this.action)
        this.action =''
      },

      //点击保存
      holdBtn(){
        if (this.isclickpages) {
        this.$message({
          message: "系统提示：操作过于频繁,稍后再试噢 （⊙ｏ⊙）",
          type: "warning",
        });
        return;
      }
      this.isclickpages = true;

      setTimeout(() => {
        this.isclickpages = false;
      }, 2000);

        let {id ,name,bulletin,deliveryPrice,deliveryTime,description,score,sellCount,avatar} = this.shopData
        let data = {
          id,
          name,
          bulletin,
          deliveryPrice,
          deliveryTime,
          description,
          score,
          sellCount,
          //头像
          avatar:avatar.substring(avatar.lastIndexOf('/')+1),
          // 特殊数据
          supports:JSON.stringify(this.shopData.supports),
          date:JSON.stringify(this.shopData.date),
          pics:JSON.stringify(this.picsUpdate),
        }
        shopedit(data).then(res=>{
          // console.log(res.data);
          if(res.data.code==0){
          this.$message({
          message: '系统提示 : 店铺内容修改成功 o(^▽^)o',
          type: 'success'
        });

          }
        })
      }      
    },
     created(){
     this.shopMabager()

     this.$bus.emit('subTitle','店铺管理>')

    },

};
</script>

<style lang="less" scoped>
.shopManager {
  background: #fff;
}
//头像

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    
  }
</style>